<template>
  <div class="header">
    <div class="title">高级搜索</div>
    <div class="form">
      <el-form style="font-size: 12px; color: #666; padding: 20px" :model="formList">
        <el-row :gutter="20">
          <el-col :span="8"
            ><el-form-item label-width="80px" label="客户ID:">
              <el-input
                placeholder="请输入"
                size="large"
                v-model="formList.clientId"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label-width="80px" label="手机号:">
              <el-input
                placeholder="请输入"
                size="large"
                v-model="formList.phone"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label-width="80px" label="客户姓名:">
              <el-input
                placeholder="请输入"
                size="large"
                v-model="formList.clientName"
              ></el-input></el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label-width="80px" label="商机归属:">
              <el-select
                clearable
                placeholder="Select"
                style="width: 100%"
                size="large"
                v-model="formList.userName"
              >
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="80px" label="商机状态:">
              <el-select
                clearable
                placeholder="Select"
                style="width: 100%"
                size="large"
                v-model="formList.status"
              >
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="80px" label="创建时间:">
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期"
              ></el-date-picker> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col style="display: flex; justify-content: end">
            <el-form-item>
              <el-button type="info" size="large" round @click="reset">重置</el-button>
              <el-button type="primary" size="large" round @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
  <!-- 分割线 -->
  <div class="found" style="margin: 30px 0; display: flex; justify-content: end">
    <el-button type="danger" style="padding: 20px" size="large" round @click="dialogVisible = true"
      >新建商机</el-button
    >
    <el-button type="info" style="padding: 20px" size="large" round>批量分配</el-button>
  </div>
  <div class="table">
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="clientId" label="客户ID" />
      <el-table-column prop="clientName" label="姓名" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="subject" label="意向学科" />
      <el-table-column prop="userName" label="归属人" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="status" label="商机状态">
        <template v-slot="{ row }">
          <span v-if="row.status === 0">待跟进 </span>
          <span v-if="row.status === 1">跟进中 </span>
          <span v-if="row.status === 2">废弃商机 </span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template v-slot="{ row }">
          <el-button type="text">查看</el-button>
          <el-button type="text">跟进</el-button>
          <el-button type="text">分配</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demonstration">
      <el-config-provider :locale="locale">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 40]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-config-provider>
    </div>
  </div>
  <!-- <button @click="getListApi">123</button>
  <new-business v-model:dialogVisible="dialogVisible"></new-business> -->
</template>
<script setup>
import { ref, onMounted } from 'vue'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import { getList } from '@/api/business.js'
// import NewBusiness from './components/NewBusiness.vue'
const dialogVisible = ref(false)
//表单绑定
const formList = ref({
  clientId: null,
  phone: '',
  clientName: '',
  userName: '',
  status: '',
  createTime: '',
  page: 1,
  pageSize: 10
})
const total = ref(null)
const list = ref([])
const getListApi = async () => {
  const res = await getList(formList.value)
  list.value = res.data.records
  total.value = res.data.total
}

onMounted(() => {
  getListApi()
})
const value1 = ref('')
const search = () => {
  getListApi()
}
const reset = () => {
  formList.value.phone = ''
  formList.value.clientName = ''
  formList.value.userName = ''
  formList.value.status = ''
  formList.value.createTime = ''
  getListApi()
}
</script>
<style scoped lang="scss">
.header {
  .title {
    padding-left: 20px;
    background-color: #fff;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e9e8;
  }
  .form {
    background-color: #fff;
    padding: 20px;
  }
}
.table {
  background-color: #fff;
  padding: 15px;
}
.demonstration {
  display: flex;
  justify-content: end;
  margin-top: 15px;
}
.footer {
  .footer_left {
    border: 1px solid red;
    padding: 10px;
  }
  .footer_right {
    border: 1px solid red;
    padding: 10px;
  }
}
::deep(.el-input) {
  width: 100% !important;
}
</style>
